<template>
	<z-paging ref="paging" v-model="dataList" @query="queryList" :default-page-size="15">
		<template #loading>
			加载中...
		</template>
		<uni-list border-full v-if="dataList.length">
			<uni-list-item clickable @click="routerTo(`/pages_raffle/detail/detail?id=${item._id}`)" showArrow :title="item.nickname"
				:note="`创建于${moment(item.create_time).format('YYYY-MM-DD HH:mm:ss')}\n已参与：${item.join_count}人`"
				:rightText="activeState(item.active_state)" v-for="item in dataList" :key="item._id" />
		</uni-list>
	</z-paging>
	<uni-fab ref="fab" :pattern="{icon:'plusempty'}" horizontal="right" vertical="bottom" @fabClick="fabClick" />
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		routerTo,
		activeState
	} from '@/utils/common';
	import moment from 'moment';
	const db = uniCloud.database();

	/**
	 * 加载刷新参数
	 */
	const paging = ref(null);
	const dataList = ref([]);
	// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用paging.value.reload()即可
	const queryList = async (pageNo, pageSize) => {
		try {
			let rallfeTemp = db.collection("raffle-data").orderBy("create_time desc").getTemp();
			let userTemp = db.collection("uni-id-users").field("_id,nickname").getTemp();
			let {
				result: {
					errCode,
					data
				}
			} = await db.collection(rallfeTemp, userTemp)
				.field("active_state,create_time,join_count,arrayElemAt(user_id.nickname,0) as nickname,_id")
				.get();
			if (errCode === 0) {
				paging.value.complete(data);
			} else {
				uni.showToast({
					title: "参数错误",
					icon: "error"
				})
			}
		} catch (err) {
			console.log(err)
			uni.showToast({
				title: err,
				icon: "error"
			})
		}
	}

	const fabClick = () => {
		routerTo("/pages_raffle/edit/edit")
	}
</script>

<style>

</style>